* {
    box-sizing: border-box;
    cursor: none !important;
}
html {
}
html,
body {
    height: 100%;
}
body {
    background-color: black;
    overflow: hidden;
}
.wrap {
    cursor: pointer;
    transform-style: preserve-3d;
    position: absolute;
    left: 50%;
    top: 50%;
    animation-name: move, wrap;
    animation-duration: 10s, 4s;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite;
}

.x,
.y,
.z {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-width: 10px;
    border-style: solid;
    position: absolute;
    left: -55px;
    top: -55px;
    animation: color 4s infinite linear alternate;
}
.x {
    border-color: red;
}
.y {
    border-color: yellow;
    transform: rotateY(90deg);
}
.z {
    border-color: greenyellow;
    transform: rotateX(90deg);
}
@keyframes wrap {
    100% {
        transform: rotate3d(1, 1, 1, 360deg);
    }
}
@keyframes move {
    100% {
    }
}

@keyframes color {
    100% {
        filter: invert(100%);
    }
}
